<script lang="ts" setup>
import type { userFromType } from "./type";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import request from "@/utils/request";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const userFormRef = ref();
const userFrom = reactive<userFromType>({
  username: "",
  password: "123456",
  role: "1",
});

const userFormRules = reactive({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
});

const options = [
  {
    label: "管理员",
    value: "0",
  },
  {
    label: "用户",
    value: "1",
  },
];
const submitForm = () => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      request.post("/user/add", userFrom).then(() => {
        router.push("/user-manage/userlist");
      });
      userFrom.username = "";
      userFrom.role = "";
    }
  });
};
const goBack = () => {
  router.back();
};
</script>
<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 添加用户 </span>
    </template>
  </el-page-header>
  <div class="divBox">
    <el-form
      ref="userFormRef"
      :model="userFrom"
      :rules="userFormRules"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="userFrom.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          disabled
          v-model="userFrom.password"
          type="password"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item label="权限" prop="role">
        <el-select
          v-model="userFrom.role"
          placeholder="请选择权限"
          :disabled="store.state.userInfo.username !== 'admin'"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="submitForm">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.divBox {
  display: flex;
  height: calc(100% - 24px);
  justify-content: center;
  align-items: center;
  .el-form {
    width: 50%;
  }
}
</style>
